<template>
  <div class="detail-container">
    <el-button type="primary" icon="el-icon-back" @click="goBack()"
      >返回</el-button
    >
    <el-card class="detail-card">
      <div slot="header" style="text-align: center; font-size: large">
        <span style="text-align: center">{{ form.patentName }}</span>
      </div>

      <div v-if="false">{{ form.id }}</div>
      <div class="detail-content">
        <el-row :gutter="20">
          <el-col :span="8"
            >编号：<el-tag>{{ form.patentCode }}</el-tag></el-col
          >
          <el-col :span="8"
            >创建人：<el-tag>{{ form.creatorName }}</el-tag></el-col
          >
          <el-col :span="8"
            >创建时间：<el-date-picker
              v-model="form.created"
              type="datetime"
              disabled
              style="width: 50%"
            />
          </el-col>
        </el-row>
      </div>
    </el-card>
    <br />
    <el-card class="el-card-margin">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-descriptions title="专利信息" column="2" border>
            <el-descriptions-item label="专利名称">
              <i class="el-icon-document"></i>
              {{ form.patentName }}
            </el-descriptions-item>

            <el-descriptions-item label="专利编号">
              <i class="el-icon-tag"></i>
              {{ form.patentCode }}
            </el-descriptions-item>

            <el-descriptions-item label="专利类别">
              <i class="el-icon-folder"></i>
              {{ form.patentCategoryName }}
            </el-descriptions-item>

            <el-descriptions-item label="公司名称">
              <i class="el-icon-office-building"></i>
              {{ form.company }}
            </el-descriptions-item>

            <el-descriptions-item label="发明人">
              <i class="el-icon-user"></i>
              {{ form.inventor }}
            </el-descriptions-item>

            <el-descriptions-item label="专利所有人">
              <i class="el-icon-user-solid"></i>
              {{ form.patentOwner }}
            </el-descriptions-item>

            <el-descriptions-item label="申请号">
              <i class="el-icon-document-copy"></i>
              {{ form.applicationNum }}
            </el-descriptions-item>

            <el-descriptions-item label="申请日期">
              <i class="el-icon-calendar"></i>
              <el-date-picker
                v-model="form.applicationDate"
                type="date"
                placeholder="选择申请日期"
                disabled
              />
            </el-descriptions-item>

            <el-descriptions-item label="登记日期">
              <i class="el-icon-calendar"></i>
              <el-date-picker
                v-model="form.registerDate"
                type="date"
                placeholder="选择登记日期"
                disabled
              />
            </el-descriptions-item>

            <el-descriptions-item label="专利号">
              <i class="el-icon-key"></i>
              {{ form.patentNum }}
            </el-descriptions-item>

            <el-descriptions-item label="专利期限">
              <i class="el-icon-clock"></i>
              {{ form.patentTerm }} 年
            </el-descriptions-item>

            <el-descriptions-item label="专利授权日期">
              <el-date-picker
                v-model="form.authorizationDate"
                type="date"
                placeholder="选择授权日期"
                disabled
              />
            </el-descriptions-item>

            <el-descriptions-item label="获取方式">
              <i class="el-icon-swap"></i>
              {{ form.getMethod === 1 ? "方法一" : "方法二" }}
              <!-- 根据实际情况修改 -->
            </el-descriptions-item>

            <el-descriptions-item label="备注">
              <i class="el-icon-help"></i>
              {{ form.remark }}
            </el-descriptions-item>

          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { patent } from "@/api/patent";

export default {
  data() {
    return {
      form: {
        id: 1,
        patentName: "",
        patentCode: "",
        patentCategoryName: "",
        company: "",
        inventor: "",
        patentOwner: "",
        applicationNum: "",
        applicationDate: "",
        registerDate: "",
        patentNum: "",
        patentTerm: "",
        authorizationDate: "",
        getMethod: "",
        remark: "",
        creatorName: "",
        created: "",
        updated: "",
      },
      id: this.$route.params.id,
    };
  },
  created() {
    this.getBasic();
  },
  methods: {
    getBasic() {
      patent.findBasic(this.id).then((res) => {
        this.form = res.data;
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped></style>
